<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0px;
            font-family: 微软雅黑;
        }

        /*头部样式*/
        #head {
            background-color: white;
            height: 120px;
            position: relative;
        }

        #head a {
            text-decoration: none;
        }

        #head_title {
            font-size: 32px;
            position: absolute;
            margin: 42px 40px;
            font-weight: bold;

        }

        #head_title a {
            color: #076ce0;
        }

        #head_menu {
            font-size: 16px;
            position: absolute;
            right: 103px;
            top: 51px;
        }

        #head_menu a {
            color: black;

        }

        #head_menu > div {
            float: left;
            margin: 0 20px;
        }

        /*图片*/
        #img {
            height: 300px;
            /* 设置背景图片 */
            background-image: url("../front/image/keyService/01.jpg");
            /* 设置图片尺寸: 宽 高  */
            background-size: 140% 300px;
            /* 禁止重复 */
            background-repeat: no-repeat;
        }

        /*选项*/
        #body_menu {
            height: 95px;
            padding: 32px 40px 50px 39px;
        }

        #body_menu > div {
            width: 130px;
            height: 44px;
            text-align: center;
            transition-duration: 0.5s; /*设置动画持续时间*/
        }

        #body_menu_d0 {
            background-color: #076ce0;
        }

        #body_menu_d1 {
            background-color: white;
        }

        #body_menu > div {
            float: left;
            margin-right: 21px;
        }

        #body_menu > div > span {
            line-height: 44px;
            color: white;
        }

        /*正文*/
        .content {
            border: 1px solid rgba(153, 153, 153, 0.3);
            margin: 40px 30px 10px 30px;
            height: 170px;
            padding: 40px 70px 40px 50px;
            position: relative;
        }

        .content_img > img {
            width: 265px;
            height: 165px;
            position: absolute;
        }

        .content_text {
            position: absolute;
            left: 370px;
            width: 60%;
        }

        .text {
            font-size: 12px;
            color: rgba(153, 153, 153, 1);
            line-height: 30px;
        }

        .content_text_send {
            margin-bottom: 20px;
            margin-top: 6px;
            position: relative;
        }

        .content_text > div > span > a {
            color: rgb(7, 108, 224);
            font-size: 14px;
            text-decoration: none;
            float: right;
            left: 5px;
        }

        #tail {
            height: 161px;
            background-color: rgba(23, 23, 23, 0.85);
            position: relative;
            color: rgb(153, 153, 153);
        }

        #tail_address {
            position: absolute;
            left: 30px;
        }

        #tail_phone {
            position: absolute;
            left: 1060px;
            top: 70px;
        }

        #tail_img {
            position: absolute;
            left: 1000px;
            top: 70px;
        }

        #tail_phone > p {
            margin: 5px;
        }

        #tail_last {
            height: 21px;
            background-color: rgba(23, 23, 23, 0.9);
            color: rgb(153, 153, 153);
            padding: 30px 30px;

        }

        #tail_last > span > a {
            text-decoration: none;
            color: rgb(153, 153, 153);
            font-size: 14px;
        }

        /*锚点 回到顶部*/
        #back_top {
            width: 42px;
            height: 42px;
            position: fixed; /*固定定位*/
            bottom: 55px;
            right: 65px;
            display: none;
        }
    </style>
</head>
<body>
<a href="" id="top1"></a>
<div id="bodyApp">
    <div id="head">
        <div id="head_title">
            <a href="./index">{{aboutUs.name}}</a>
        </div>
        <div id="head_menu">
            <div><a href="./index">首页</a></div>
            <div><a href="./breSources">业务资源</a></div>
            <div><a href="./keyServices" style="color: #076ce0">特色服务</a></div>
            <div><a href="./newsCenter">新闻中心</a></div>
            <div><a href="./aboutUs">关于我们</a></div>
        </div>
    </div>
    <div id="img"></div>
    <div>
        <div id="body_menu">
            <div id="body_menu_d0" @mousemove="fn($event)">
                <span id="body_menu_s1" style="color: white">专项服务</span>
            </div>
            <div id="body_menu_d1" @mousemove="fn($event)">
                <span id="body_menu_s2" style="color: #666666">特约服务</span>
            </div>
        </div>
        <div class="content" v-for="keyService in fKeyServices" v-show="keyService.type==type">
            <div class="content_img">
                <img :src="keyService.img" alt="">
            </div>
            <div class="content_text">
                <div>
                    <span v-text="keyService.name"></span>
                </div>
                <div class="content_text_send">
                    <span class="text">发布人:{{keyService.username}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{keyService.createdtime}}</span>
                </div>
                <div>
                <span class="text">{{keyService.summary}}<a :href="'/service?name='+keyService.name">查看详情>>&nbsp;&nbsp;&nbsp;</a>
                </span>
                </div>
            </div>
        </div>
    </div>
    <div id="tail">
        <div id="tail_address">
            <p style="font-size: 26px;margin-bottom: 15px">Property Management</p>
            <p style="font-size: 13px">联系邮箱：{{aboutUs.email}}</p>
            <p style="font-size: 13px">联系地址：{{aboutUs.address}}</p>
        </div>
        <div id="tail_img">
            <img src="../front/image/aboutUs/03.png" alt="" height="45">
        </div>
        <div id="tail_phone">
            <p style="font-size: 14px">服务热线</p>
            <p style="font-size: 18px" v-text="aboutUs.telephone">000-000-0000</p>
        </div>
    </div>
    <div id="tail_last">

        <span><a href="/admin">登录管理</a></span>
    </div>
    <div id="back_top">
        <img src="../front/image/aboutUs/04.png" alt="">
    </div>
</div>
</body>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入JQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    let v = new Vue({
        el: "#bodyApp",
        data: {
            fKeyServices: [],
            type: 0,
            aboutUs: {}
        },
        methods: {
            fn: function (e) {
                /*获取调用了该方法的对象*/
                e = e.currentTarget;

                let children = document.getElementById("body_menu").children;
                for (const child1 of children) {
                    if (e.id == child1.id) {
                        child1.style.backgroundColor = "#076ce0";
                        child1.children[0].style.color = "white";
                        v.type = e.id.substr(e.id.length - 1).toString();
                    } else {
                        child1.style.backgroundColor = "white";
                        child1.children[0].style.color = "#666666";
                    }
                }
            },
            getMenus: function () {
                axios({
                    url: '/f-keyservices/getMenus',
                    method: 'GET',
                }).then(function (response) {
                    v.fKeyServices = response.data;
                })
            },
            info: function () {
                axios({
                    url: "/f-infocompany/aboutUs",
                    method: "get"
                }).then(function (response) {
                    v.aboutUs = response.data;
                    console.log(v.aboutUs);
                })
            }
        },
        created: function () {
            this.getMenus();
            this.info();
        }
    })
    /*回到顶部*/
    $(function () {
        $(window).scroll(function () {  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if (scrollt > 50) {  //判断滚动后高度超过50px,就显示
                $("#back_top").slideDown(500); //淡入
            } else {
                $("#back_top").stop().slideUp(500); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
            }
        });
        $("#back_top").click(function () { //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop: "0px"}, 200);
        });
    });
</script>
</html>